<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Home</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width,user-scalable=no"/>
		<link href="/static/css/home.css" type="text/css" rel="stylesheet" />
		<script src="/static/js/jquery-2.1.0.min.js" type="text/javascript"></script>
		<script src="/static/js/home.js" type="text/javascript"></script>
	</head>
	
	<body>
	   {% if username %}
        <fieldset class="profile">
            <legend>个人信息</legend>
			<img class="photo" src="http://sysupj-pic.stor.sinaapp.com/test.jpg" alt="profile photo">
                <p>
                    <em><big>user name:{{ username }}
                            <br>
                              student ID:123300XX
                            <br>
                              college:software
                    </em></big>
                </p>
        </fieldset>
		{% endif %}
        <br>
		    <div class="overview">
			<h2 style="display:inline">系统分析与设计</h2><button class="follow">关注</button>
            <img class="pic0" src="http://sysupj-pic.stor.sinaapp.com/pic0.jpg" alt="profile photo">
			<p>地点：东校区公教楼B202</P>
			<p>上课时间：1~18周 3~5节</p>
			<p>学分：3</p>
			<p><a>任课教师: pml</a></p>
		    </div>
        
		
		<details class="brief">
            <summary >课程简介</summary>
                <p>
                    Curabitur in massa tristique, laoreet quam in, mattis neque......
                </p>
		</details>
		
		<div class="relatedCourses">
			相关课程：<a>工作流技术</a>
		</div>
		
		<div style="margin-bottom:10px">
		<fieldset id="materials" class="materials">
			<legend>课件区</legend>
			<button id="uploadBtn" class="uploadBtn">我要上传</button>
			<form id="uploadForm" ENCTYPE="multipart/form-data" ACTION="/upload/" METHOD="POST">  
				选择你的文件(最大20M): <input name="file" type="file">
				<input type="submit" value="上传">  
			</form>
			
			{% for material in materials %}
			<div id="material" class="material">
				<img class="icon" src="http://sysupj-pic.stor.sinaapp.com/test.jpg" alt="material photo">
				<div class="content"><span>{{material.name}}</span> <span>上传者：{{material.uploader}}</span>
				</div>
				<a href="{{material.filepath}}" download="{{material.name}}" class="download">下载</a>
			</div>
			{% endfor %}
		</fieldset>
		</div>
		
		<div>
		<fieldset id="discussions" class="discussions">
			<legend>讨论区</legend>
			<select>
				<option value="sortByTime">按发布时间排序</option>
				<option value="sortByLike">按热度排序</option>
			</select>
			<button id="commentBtn" class="commentBtn">写新评论</button>
			
			<div id="commentForm" style="margin-top:5px">
				<textarea id="commentArea" name="commentArea" placeholder="请输入你的评论" maxlength=150 rows=4 style="width:100%"></textarea>
				<input id="submitBtn" type="button" value="发布">
			</div>
			
			<div id="comments">
			{% for comment in comments %}
			<div id="comment" class="comment">
				<img class="icon" src="http://sysupj-pic.stor.sinaapp.com/test.jpg" alt="profile photo">
				<div class="content"><span>{{comment.poster}}</span>:<span>{{comment.content}}</span>
				</div>
				<div class="operation"><span>2015-XX-XX</span> <span>回复</span> <span>评论</span> <span>关于我的</span></div>
			</div>
			{% endfor %}
			</div>
		</fieldset>
		</div>
	</body>
</html>